<template>
  <section class="content">

    <!-- row -->
    <div class="row">
      <div class="col-md-12">
        <!-- The time line -->
        <ul class="timeline">
          <!-- timeline item -->
          <li>
            <label for="" class="bg-green pull-left nav-info">选择类别</label>

            <div class="timeline-item">

              <h3 class="timeline-header"><a href="#">选择类别</a></h3>

              <div class="timeline-body">
                <div class="panel box box-primary">
                  <div class="box-header with-border">
                    <h4 class="box-title">
                      <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                        选择添加类型
                      </a>
                    </h4>
                  </div>
                  <div id="collapseOne" class="panel-collapse collapse in">
                    <div class="box-body">
                      <ul class="list-unstyled liItem">
                        <li v-for="(chooseSKU,index) in chooseSKUs"
                            @click="jumpAddress(chooseSKU.skuAddress);addClass(index)"
                            :class="{'bg-info':index == active}">
                          <a href="javascript:;"
                            :data-sku="chooseSKU.skuAddress">{{chooseSKU.name}}
                          </a>
                        </li>
                        <!--<li><a href="javascript:;" @click="">商品SKU</a></li>-->

                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              <div class="timeline-footer text-center">
                <router-link class="btn btn-info" :to="nextAddress">下一步，填写商品信息</router-link>
              </div>
            </div>
          </li>
          <!-- END timeline item -->
          <li>
            <i class="fa fa-clock-o bg-gray"></i>
          </li>
        </ul>
      </div>
      <!-- /.col -->
    </div>


  </section>
</template>

<script>
  export default {
    name: "AddTheGoods",
    methods: {
      jumpAddress: function (id) {
        this.nextAddress = id
      },
      addClass: function (index) {
        this.active = index;
      }
    },
    data() {
      return {
        chooseSKUs: [
          {name: "商品SKU", skuAddress: 'singleSKU'},
          {name: "组合商品SKU", skuAddress: 'combinationSKU'}
        ],
        nextAddress: "",
        active: 0
      }
    }
  }
</script>

<style scoped>

</style>
